<template>
  <div class="detail">
    <!-- 属性：topImages 传入值：top-images -->
    <detail-nav-bar @detailNavIndex="detailNavIndex" ref="nav"></detail-nav-bar>
    <scroller class="detail-scroller" ref="scroller" @scroll="contentScroll" :probeType="3">
      <detail-swiper :detail-img="detailImg"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shopInfo"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imgload="imgload"></detail-goods-info>
      <detail-param-info :param-info="itemParams" ref="paramOffsetTop"></detail-param-info>
      <detail-comment-info :comment-info="rate" ref="commentOffsetTop"></detail-comment-info>
      <detail-recommend-info :recommend-list="recommendList" ref="recommendOffsetTop"></detail-recommend-info>
    </scroller>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"></back-top>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBottomBar from './childComps/DetailBottomBar'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailRecommendInfo from './childComps/DetailRecommendInfo'

import Scroller from 'components/common/scroller/Scroller'
import {backTopMixin} from 'common/mixin'


import {getDetail, Goods, getRecommend} from '@/network/detail'
import {debounce} from 'common/utils'
export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      detailImg: [],
      goods: {},
      shopInfo: {},
      detailInfo: {},
      itemParams: {},
      rate: {},
      recommendList: [],
      itemImgListener: null,
      contentOffsetTop: null,
      getContentOffsetTop: null,
      notLog: null,
    }
  },
  mixins: [backTopMixin],
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailBottomBar,
    Scroller,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailRecommendInfo,
  },

  created() {
    //1.获取iid
    this.iid =  this.$route.params.iid
    // console.log(this.iid);
    // console.log(getDetail(this.iid));

    //2.请求详情数据
    getDetail(this.iid).then(res => {
      //1.获取数据
      const data = res.result;

      //2.取出轮播图的数据
      // console.log(res);
      this.detailImg = res.result.itemInfo.topImages

      //3.创建商品的对象
      this.goods = new Goods(res.result.itemInfo, res.result.columns, res.result.shopInfo.services)
      // console.log(this.goods);

      //4.取出店铺的信息
      this.shopInfo = data.shopInfo
      // console.log(this.shopInfo);
      
      //5.取出商品的详细展示信息
      this.detailInfo = data.detailInfo
      // console.log(this.detailInfo);

      //6.取出商品的尺码信息
      this.itemParams = data.itemParams
      // console.log(this.itemParams);

      //7.取出用户评价的信息
      this.rate = data.rate
      console.log(this.rate);
    })
    getRecommend().then(res => {
      // if (error) return
      this.recommendList = res.data.list
      // console.log(res);
    })

    this.getContentOffsetTop = debounce(() => {
      this.contentOffsetTop = []
      
      this.contentOffsetTop.push(0)
      this.contentOffsetTop.push(this.$refs.paramOffsetTop.$el.offsetTop)
      this.contentOffsetTop.push(this.$refs.commentOffsetTop.$el.offsetTop)
      this.contentOffsetTop.push(this.$refs.recommendOffsetTop.$el.offsetTop)

      // console.log(this.contentOffsetTop);
    }, 100)
  },
  mounted() {
    let newRefresh = debounce(this.$refs.scroller.refresh, 100)
    this.itemImgListener = () => {
      newRefresh()
    }
    this.$bus.$on('imgLoad', this.itemImgListener)
  },
  methods: {
    imgload() {
      this.itemImgListener() 
      this.getContentOffsetTop()
    },
    detailNavIndex(index) {
      this.$refs.scroller.scrollTo(0, -this.contentOffsetTop[index] ,200)
    },
    contentScroll(position) {
      // console.log(position.y);
      if (-position.y < this.contentOffsetTop[1] && this.notLog !== 0){
        this.notLog = 0
        this.$refs.nav.currentIndex = this.notLog 
      }else if(this.contentOffsetTop[1] <= -position.y && -position.y < this.contentOffsetTop[2] && this.notLog !== 1) {
        this.notLog = 1
        this.$refs.nav.currentIndex = this.notLog
      }else if(this.contentOffsetTop[2] <= -position.y && -position.y < this.contentOffsetTop[3] && this.notLog !== 2) {
        this.notLog = 2
        this.$refs.nav.currentIndex = this.notLog
      }else if(-position.y >= this.contentOffsetTop[3] && this.notLog !== 3) {
        this.notLog = 3
        this.$refs.nav.currentIndex = this.notLog
      }
    },
    contentScroll(postion) {
      //1.判断BackTop是否显示
        this.isShowBackTop = -postion.y > 300
    },
    addToCart() {
      console.log('addToCart');
      
    }
  },
  destroyed() {
    this.$bus.$off('itemImgLoad', this.itemImgListener)
    // console.log('destroyed');
  }
}
</script>

<style>
  .detail {
    height: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 1;
    
  }

  .detail-scroller {
    /* overflow: hidden; 
    position: absolute;
    top: 44px;
    bottom: 49px;
    right: 0;
    left: 0; */
    position: absolute;
    top: 44px;
    bottom: 60px;
    z-index: 1;
  }

</style>